<template>
    <div class="page-container">
        <van-nav-bar
            title="单词本"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
        />

        <div class="container">
            <van-list>
                <div
                    v-for="result in wordbook.wordlist"
                    :key="result.id"
                    class="search-result"
                >
                    <div class="word">单词：{{ result.name }}</div>
                    <div class="meaning">翻译：{{ result.description }}</div>

                    <div class="button">
                        <van-button
                            type="danger"
                            size="small"
                            @click="removeWord(result)"
                            >删除</van-button
                        >
                    </div>
                </div>
            </van-list>
        </div>
    </div>
</template>

<script setup>
import { getCurrentInstance, onMounted, ref, computed } from "vue";
import { useRoute, useRouter } from "vue-router";

import { useStore } from "vuex";
import { Toast } from "vant";

import { updateWord } from "@/api/words";

const router = useRouter();
const route = useRoute();
const store = useStore();

const wordbook = computed(() => {
    return store.getters.workbook;
});

onMounted(() => {});

const removeWord = async (item) => {
    wordbook.value.wordlist = wordbook.value.wordlist.filter(
        (ele) => ele.id != item.id
    );

    store.commit("SAVE_WORD_BOOK", wordbook.value);

    await updateWord(wordbook.value);
};

const onClickLeft = () => {
    router.back();
};
</script>

<style scoped>
.container {
    padding: 12px;
}
.search-result {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.word {
    font-weight: bold;
}
</style>
